  <!DOCTYPE html>
  <html lang="en"
        xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
        xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>我的相册</title>
    <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../res/css/main.css">
  <!--加载meta IE兼容文件-->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->
  </head>
  <style>
    .userLabel{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-left: 30px
    }
  </style>
  <body>
    <div class="header" style="margin-bottom: 40px">
      <div class="menu-btn">
        <div class="menu"></div>
      </div>
      <h1 class="logo">
        <a href="index.html">
          <span>MYBLOG</span>
          <img src="../res/img/logo.png" style="width: 120px;height: 80px">
        </a>
      </h1>
      <div class="nav">
        <a href="/toIndex.action" >文章</a>
        <a href="/toMyBlog.action">我的博客</a>
        <a href="/toWrite.action">写博客</a>
        <a href="/toAlbum.action"class="active">相册</a>
        <a href="/toAbout.action">个人空间</a>
        <input form="searchForm" type="text" name="searchKey" placeholder="  搜索博客"  style="border-radius: 4px
        ;padding: 3px 0px;font-family: Microsoft YaHei UI;border-style: solid;border-color: forestgreen;">
        <button class="layui-btn" onclick="search()"><i class="layui-icon">&#xe615;</i>搜索</button>
        <label th:if="${session.loginUser != null}">
          <img class="userLabel" th:if="${session.loginUser.sex == 'female'}"src="../res/img/label/girl.png" >
          <img class="userLabel" th:if="${session.loginUser.sex == 'male'}"src="../res/img/label/boy.png" >
          <a href="/toAbout.action" style="color: forestgreen;margin-left: 5px;" th:text="'欢迎您,'+${session.loginUser.name}"></a>
        </label>
      </div>
      <form id="searchForm" action="/searchEssayByTitle.action"></form>
      <ul class="layui-nav header-down-nav">
        <li class="layui-nav-item"><a href="/toIndex.action" >所有文章</a></li>
        <li class="layui-nav-item"><a href="/toMyBlog.action">我的博客</a></li>
        <li class="layui-nav-item"><a href="/toWrite.action">写博客</a></li>
        <li class="layui-nav-item"><a href="/toAlbum.action">相册</a></li>
        <li class="layui-nav-item"><a href="/toAbout.action">个人空间</a></li>
        <li class="layui-nav-item" th:if="${session.loginUser == null}"><a href="toLogin">登录</a></li>
        <li class="layui-nav-item" th:if="${session.loginUser != null}"><a href="toLogout">注销</a></li>
      </ul>
        <div th:if="${session.loginUser == null}">
            <p  class="welcome-text">
                <a href="toLogin" class="layui-btn">登录</a>
            </p>
        </div>
        <div th:if="${session.loginUser != null}">
            <p  class="welcome-text">
                <a href="toLogout" class="layui-btn">注销</a>
            </p>
        </div>
    </div>
    <div class="album-content w1000"  id="layer-photos-demo" style="background: #faf8fb">
      <div class="img-info">
        <img th:src="@{${session.mainAlbum}}" alt="" style="width: 94%;height: 320px;margin-left: 3%;margin-top: 50px">
        <div id="uploadModule" style="display: none" class="form">
          <form class="layui-form" enctype="multipart/form-data" id="Form" method="post" >
            <input type="hidden" th:value="${session.loginUser.id}" name="userId">
            <input type="hidden" id="imgUrl" name="imgUrl">
            <input class="layui-input" style="width: 150px;float: left;margin-left: 5%;margin-top: 50px" placeholder="请输入图片标题" name="imgMessage">
            <button lay-submit="" lay-filter="formDemo" class="layui-btn definite" style="margin-left: 15px;margin-top: 50px">提交</button>
            <button type="button" class="layui-btn" id="uploadImg" style="margin-top: 50px">
              <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
          </form>
        </div>
        <button class="layui-btn" style="float: right;margin-top: 50px;margin-right: 150px" id="displayModule" onclick="display()">添加图片</button>
        <div class="title">
          <!--<p class="data">今日上传<span>2018/10/10</span></p>
          <p class="text">观赏最美的土耳其的日</p>-->
        </div>
      </div>
      <div class="img-list" th:if="${session.albumList!=null}">
        <div class="layui-fluid" style="padding:0">
          <div class="layui-row layui-col-space30 space">
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4" th:each="album:${session.albumList}">
              <div class="item">
                <img th:src=${album.imgUrl} style="width: 240px;height: 160px">
                <div class="cont-text">
                  <div class="data" th:text="${album.publishTime}" style="margin-left: 20%"></div>
                  <form class="layui-form" method="post">
                    <p class="briefly" style="display: inline;margin-left: 20%" th:text="${album.imgMessage}"></p>
                    <input type="hidden" th:value="${album.id}" name="albumId">
                    <button class="layui-btn" lay-submit="" lay-filter="albumDelete" style="float: right;margin-right: 20%"><i class="layui-icon">&#xe640;</i></button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-wrap">
      <div class="footer w1000">
        <div class="qrcode">
          <img src="../res/img/erweima.jpg">
        </div>
        <div class="practice-mode">
          <img src="../res/img/down_img.jpg">
          <div class="text">
            <h4 class="title">我的联系方式</h4>
            <p>微信<span class="WeChat">15521306790</span></p>
            <p>手机<span class="iphone">15521306790</span></p>
            <p>邮箱<span class="email">1115051923@qq.com</span></p>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../res/layui/layui.js"></script>
    <script type="text/javascript">
     layui.config({
        base: '../res/js/util/'
      }).use(['element','laypage','form','layer','menu'],function(){
        element = layui.element,laypage = layui.laypage,form = layui.form,layer = layui.layer,menu = layui.menu;
        laypage.render({
          elem: 'demo'
          ,count: 70 //数据总数，从服务端得到
        });
        layer.photos({
          photos: '#layer-photos-demo'
          ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
          ,tab:function(pic,layero){
            console.log(pic,layero)
          }
        });
        menu.init();
      })
    </script>
    <script type="text/javascript">
      layui.use(['upload','form'], function() {
        var upload = layui.upload;
        var form = layui.form;
        $=layui.jquery;
        /*$("#input").val(content);*/
        //执行实例
        var uploadInst = upload.render({
          elem: '#uploadImg' //绑定元素
          , url: '/uploadImg.action' //上传接口
          , accept: 'file'
          , done: function (res) {
            //接收图片url后赋给表单
            $("#imgUrl").val(res.imgUrl);
            //上传完毕回调
            layui.use('layer', function () {
              var layer = layui.layer;
              layer.msg(res.msg, {
                time: 1000, //1s后自动关闭
                icon: 1
              });

            });
          }
          , error: function () {
            layer.msg("文件过大,上传失败",{
              time: 1000,
              icon:2
            });
          }
        });

        form.on('submit(formDemo)', function(data){
          $.ajax({
            url:'/uploadAlbum.action',
            method:'post',
            data:data.field,
            dataType:'JSON',
            success:function(res){
              var layer = layui.layer;
              layer.msg(res.msg, {
                time: 2000, //1s后自动关闭
                icon: 1

              });
              window.location.href="/toAlbum.action";
            },
            error:function (data) {
              layer.msg("上传异常,请稍后再试",{
                time: 2000,
                icon: 1
              });
            }
          });
          return false;
        })

        form.on('submit(albumDelete)', function(data){
          $.ajax({
            url:'/albumDelete.action',
            method:'post',
            data:data.field,
            dataType:'JSON',
            success:function(res){
              var layer = layui.layer;
              layer.msg(res.msg, {
                time: 2000, //1s后自动关闭
                icon: 1
              });
              window.location.href="/toAlbum.action";
            },
            error:function (data) {

            }
          });
          return false;
        })
      })
    </script>
    <script>
      function search() {
        document.getElementById("searchForm").submit();//js原生方式表单提交
      }

      function display() {
        document.getElementById("uploadModule").style.display="inline";
        document.getElementById("displayModule").style.display="none";
      }
    </script>
  </body>
  </html>